import React from 'react';
import { Button } from 'antd';
import { PlusOutlined } from '@ant-design/icons';
import FilterList from './FilterList';

const FilterGroup = ({ value = [], sourceList = [], targetList = [], onChange }) => {
  const handleChange = (item, index) => {
    let result = [...value];
    result[index] = item;
    result = result.filter((item, index) => index === 0 || item.length > 0);
    if (result.length === 0) {
      result = [[]];
    }
    onChange(result);
  };

  const handleAdd = () => {
    const result = [...value];
    result.push([{}]);
    onChange(result);
  };

  return (
    <div className="filter-condition">
      {value.map((list, index) => (
        <FilterList
          key={index}
          list={list}
          sourceList={sourceList}
          targetList={targetList}
          onChange={(item) => handleChange(item, index)}
        />
      ))}
      <Button onClick={handleAdd} icon={<PlusOutlined />}>
        或条件
      </Button>
    </div>
  );
};

export default FilterGroup; 